<template>
  <e-charts :options="options" @mouseover="clearData()" @mouseout="swiper()"/>
</template>

<script setup lang="ts">
import { GET } from '@/api'
import useSettingStore from "@/stores/setting";
import { graphic } from "echarts"

const options = ref({})
let timer:number
let labelOption = {
  color:'#ffffff',
  show: true,
  position: 'insideBottom',
  distance: 15,
  align: 'left',
  verticalAlign: 'middle',
  rotate: 90,
  formatter: '{c}  {name|{a}}',
  fontSize: 16,
  rich: {
    name: {}
  }
}

const props = defineProps({
  deviceId: {
    type: String,
    default: '',
    required: true
  }
})

onMounted(()=>{
  getData(1)
  swiper()
})

onBeforeUnmount(()=>{
  clearData()
})

watch(
    () => props.deviceId,
    (val: any) => {
      getData(1)
    }
)

function getData(type:number){
  GET("average", { deviceId: props.deviceId }).then(res => {
    if (res.code === 200) {
      nextTick(() => {
        if (type === 1){
          initOptions(res.data[0], res.data[1], res.data[2], res.data[3])
        } else {
          updateOptions(res.data[0], res.data[1], res.data[2], res.data[3])
        }
      })
    } else {
      Window.$message({
        message: res.msg,
        type: "warning",
      })
    }
  })
}

function swiper(){
  if (timer) {
    return
  }
  let looper = () => {
    getData(2)
  }
  timer = setInterval(looper, useSettingStore().echartsAutoTime);
}

function initOptions(yData1, yData2, yData3,yData4){
  options.value = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
      formatter: function (params){
        let tip = params[0].axisValue + "<br />"
        if (params !== null && params.length > 0){
          tip += params[0].marker + params[0].seriesName + ':  ' + params[0].value + 'cm<br />'
          tip += params[1].marker + params[1].seriesName + ':  ' + params[1].value + 'cm<br />'
          tip += params[2].marker + params[2].seriesName + ':  ' + params[2].value + 'cm<br />'
          tip += params[3].marker + params[3].seriesName + ':  ' + params[3].value + 'cm'
        }
        return tip
      },
    },
    grid: {
      //布局
      show: true,
      left: "10px",
      right: "10px",
      bottom: "10px",
      top: "28px",
      containLabel: true,
      borderColor: "#1F63A3",
    },
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: ['0分钟', '5分钟', '10分钟', '30分钟', '60分钟'],
        axisLabel: {
          color: '#7EB7FD'
        },
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(31,99,163,.2)",
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(31,99,163,.1)",
          },
        },
        axisLabel: {
          color: "#7EB7FD",
          fontWeight: "500",
        },
        max: 60,
      }
    ],
    series: [
      {
        name: '全筛面',
        type: 'bar',
        barGap: 0,
        label: labelOption,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgba(106,197,241,0.08)' },
            { offset: 0.5, color: '#0cabee' },
            { offset: 0, color: '#057df5' }
          ])
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#057df5' },
              { offset: 0.7, color: '#0cabee' },
              { offset: 1, color: 'rgba(106,197,241,0.08)' }
            ])
          }
        },

        data: yData1
      },
      {
        name: '左',
        type: 'bar',
        label: labelOption,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgba(190,246,131,0.09)' },
            { offset: 0.5, color: '#26f018' },
            { offset: 0, color: '#18f05c' }
          ])
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#18f05c' },
              { offset: 0.7, color: '#26f018' },
              { offset: 1, color: 'rgba(190,246,131,0.09)' }
            ])
          }
        },
        data: yData2
      },
      {
        name: '中',
        type: 'bar',
        label: labelOption,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: '#FC901019' },
            { offset: 0.5, color: '#FC90107F' },
            { offset: 0, color: '#FC9010FF' }
          ])
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#FC9010FF' },
              { offset: 0.7, color: '#FC90107F' },
              { offset: 1, color: '#FC901019' }
            ])
          }
        },
        data: yData3
      },
      {
        name: '右',
        type: 'bar',
        label: labelOption,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: 'rgba(246,171,131,0.09)' },
            { offset: 0.5, color: '#ef6f40' },
            { offset: 0, color: '#ef0505' }
          ])
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ef0505' },
              { offset: 0.7, color: '#ef6f40' },
              { offset: 1, color: 'rgba(246,171,131,0.09)' }
            ])
          }
        },
        data: yData4
      }
    ]
  }
}

function updateOptions(yData1, yData2, yData3,yData4){
  nextTick(() => {
    options.value = {
      series: [
        {
          data: yData1,
        },
        {
          data: yData2,
        },
        {
          data: yData3,
        },
        {
          data: yData4,
        }
      ]
    }
  })
}

function clearData(){
  if (timer) {
    clearInterval(timer)
    timer = null!
  }
}
</script>

<style scoped lang="scss">

</style>